<template>
	<view class="content">
		<view class="header_tab">
			<view class="Tab_label" @tap="allorders">
				<text :class="text == '全部' ? 'text' : ''">全部</text>
			</view>
			<view class="Tab_label" @tap="waitorders">
				<text :class="text == '代付款' ? 'text' : ''">代付款</text>
			</view>
			<view class="Tab_label" @tap="alreadyorders">
				<text :class="text == '已完成' ? 'text' : ''">已完成</text>
			</view>
			<view class="Tab_label" @tap="refundorders">
				<text :class="text == '售后' ? 'text' : ''">退款/售后</text>
			</view>
		</view>
		<mescroll-uni top="100" @down="downCallback" @up="upCallback" :up="upOption"  class="message">
			<view class="message_text" v-for="(item , index) in list" :key="index">
				<image class="img" :src="item.img" mode=""></image>
				<view class="text_right">
					<view class="shop_name">
						<text>百哩香百脑汇（群光店）</text>
						<text class="iconfont iconyoujiantou" ></text>
						<text style="float: right;"  :class="item.payment == '代付款' ? 'payment' : '' ">{{item.payment}}</text>
					</view>
					<view class="text_time">
						<text>{{item.time}}</text>
					</view>
					<view class="commodity">
						<text>{{item.title}} 等{{item.number}}件商品</text>
						<text>￥{{item.price}}</text>
					</view>
					<view class="details">
						<text>删除订单</text>
						<text>再来一单</text>
						<text @tap="" class="blue" :class="item.payment != '代付款' && item.payment != '已接单' && item.payment != '已完成' ? 'none' : ''" >{{item.payment == '已完成' ? '评价' : '取消订单'}}</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	export default {
		components:{
			MescrollUni
		},
		data() {
			return {
				loading:'',
				text:'全部',
				isShowNoMore:false,
				upOption:{
					textNoMore:'我是有底线的 >_<'  
				},
				list:[
					{
						payment:'代付款',
						number:2,
						title:'孜然羊排',
						price:16,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'已接单',
						number:2,
						title:'孜然羊排',
						price:15,
						time:'2019-06-16  15.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'已付款',
						number:3,
						title:'土豆烧鸡',
						price:15,
						time:'2019-06-16  12.05',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'已退款',
						number:1,
						title:'孜然羊排',
						price:19,
						time:'2019-06-16  12.18',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'已取消',
						number:2,
						title:'玉米烧排骨',
						price:17,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					},
					{
						payment:'已完成',
						number:2,
						title:'玉米烧排骨',
						price:17,
						time:'2019-06-16  12.10',
						img:'../../../static/img/timg.jpg'
					}
					
				]
			};
		},
		onLoad(option) {
			
		},
		onPageScroll(e){
			
		},
		methods: {
		//联网加载列表数据
			//在您的实际项目中,请参考官方写法: 
			//----- - http://www.mescroll.com/uni.html#tagUpCallback   ----------------------
			
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				console.log(mescroll)
				// this.mescroll = mescroll;
			},
			// 下拉回调
			downCallback(mescroll){
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				// mescroll.resetUpScroll()
				
				setTimeout(()=>{
					console.log(666);
					// 隐藏下拉加载状态
					mescroll.endErr()
				},1000)
			},
			// 上拉回调
			upCallback(mescroll){
				setTimeout(()=>{
					console.log(6655,"下拉");
// 结束上拉加载状态  isShowNoMore=true, 显示无更多数据; isShowNoMore=false, 隐藏上拉加载; isShowNoMore=null, 保持当前状态
					if(this.list.length <= 20){
						for(var i = 0; i < 10; i++){
							var obj = {
								payment:'已付款',
								number:2,
								title:'孜然羊排',
								price:16,
								time:'2019-06-16  12.10',
								img:'../../../static/img/timg.jpg'
							};
							this.list.push(obj);
						}
						console.log(this.list);
						this.isShowNoMore = false;
						mescroll.endUpScroll(this.isShowNoMore); 
					}else {
						this.isShowNoMore = true;
						mescroll.endUpScroll(this.isShowNoMore); 
					}
				},1000)
			},
			onReachBottom(){
				
			},
			
			allorders(){
				this.text = '全部'
			},
			waitorders(){
				this.text = '代付款'
			},
			alreadyorders(){
				this.text = '已完成'
			},
			refundorders(){
				this.text = '售后'
			}
		},
		
	}
</script>
 
<style lang="scss">
	
	page{
		background-color: #f8f8f8;
		height: 100%;
	}
	.content {
		height: 100%;
		.header_tab {
			display: flex;
			background-color: #fff;
			padding-right: 20upx;
			margin-bottom: 10upx;
			z-index: 999;
			.Tab_label {
				width: 25%;
				text-align: center;
				font-size: 28upx;
				margin: 28upx 0;
				.text {
					padding: 28upx 12upx;
					border-bottom: 2px solid #FFD200;
					color: #FFD200;
				}
			}
		}
		
		.message {
			height: 92%;
			.message_text {
				display: flex;
				margin: 20upx 20upx 0;
				padding: 24upx 20upx 24upx 0  ;
				background-color: #fff;
				.img {
					width: 140upx;
					height: 140upx;
					margin: 0 20upx;
				}
				.text_right {
					font-size: 28upx;
					width: 78%;
					.shop_name {
						
						.payment {
							float: right;
							font-size: 24upx;
							color: #E51C23;
						}
						.iconyoujiantou {
							color: #4c4c4c;
							font-weight: 700;
						}
					}
					.text_time {
						font-size: 24upx;
						color:#4c4c4c;
					}
					.commodity {
						color: #101010;
						margin: 10upx 0 34upx;
						text:last-child {
							float: right;
							font-weight: 700;
						}
					}
					.details {
						color: #101010;
						display: flex;
						justify-content: flex-end;
						text {
							margin:10upx 10upx;
							padding: 0 10upx 6upx;
							border: 1px solid rgba(187 , 187 , 187 , 1);
							border-radius: 5px;
						}
						.blue {
							color: #5bb1ff;
							border: 1px solid #5bb1ff;
						}
						.none {
							display: none;
						}
					}
				}
			}
			.loading {
				font-size: 24upx;
				color:#979797;
				display: flex;
				justify-content: center;
				padding: 40upx 0;
			}
		}
	}
</style>